<template>
  <view class="page">
    <view class="search-bar">
      <view class="search-input">
        <input type="text" v-model="keywords" placeholder="请输入年级" />
        <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>
    <view class="tabs">
      <view v-for="(item, index) in statusList" :key="index" class="tab" :class="{active: index === swiperCurrent}"
        @click="change(index)">{{item.label}}</view>
    </view>
    <!-- <view class="search">
			<u-search v-model="query.keywords" @custom="search" @search="search"  height="80" placeholder="请输入年级"></u-search>
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#2b85e4" ref="tabs"  name="label" :list="statusList" :current="swiperCurrent" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
		</view> -->
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <view class="message-list">
        <view v-for="(item, index) in list" :key="index" class="message-item" @click="handleClick(item)">
          <view class="message-item-bd">
            <view class="message-title" @click.stop="navTo('../misSchoolCalendarEvent/index?calendarId='+item.id)">{{item.yearName}}年 第{{item.termName}}学期</view>
            <view class="message-desc">{{item.startTime}} ~ {{item.endTime}} 共:{{item.totalWeek}} 周</view>
            <view class="message-desc time">{{item.createTime}}</view>
            <view v-if="hasPermission('misSchoolCalendar_changeStatus')" class="message-status"
              :class="{disabled: item.status}" @click.stop="handleChangeStatus(item)">{{item.statusName}}</view>
            <view v-else class="message-status" :class="{disabled: item.status}">{{item.statusName}}</view>
          </view>
        </view>
      </view>

      <!-- <view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;margin-bottom: 5rpx;">
        <u-row gutter="16" style="margin-top: 20rpx;"
          @click="navTo('../misSchoolCalendarEvent/index?calendarId='+item.id)">
          <u-col span="12"
            style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:bold">
            {{item.yearName}}年 第{{item.termName}}学期
          </u-col>
        </u-row>
        <u-row gutter="16" style="margin-top: 20rpx;" @click="handleClick(item)">
          <u-col span="12"
            style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:gray">
            {{item.startTime}} ~ {{item.endTime}} 共:{{item.totalWeek}} 周
          </u-col>
        </u-row>
        <u-row gutter="16" style="margin-top: 20rpx;margin-bottom: 10rpx;" @click="handleClick(item)">
          <u-col span="6">
            <view style="text-align: left;color: gray;">
              {{item.createTime}}
            </view>
          </u-col>
          <u-col span="6" style="text-align: right;">
            <view v-if="hasPermission('misSchoolCalendar_changeStatus')">
              <u-button v-if="item.status==0" size="mini" shape="circle" plain type="error"
                @click="handleChangeStatus(item)">禁用</u-button>
              <u-button v-else size="mini" shape="circle" plain type="primary"
                @click="handleChangeStatus(item)">启用</u-button>
            </view>
            <view v-else style="text-align: right;color: gray;">
              {{item.statusName}}
            </view>
          </u-col>
        </u-row>
      </view> -->
      <u-loadmore class="loadmore" :status="loadStatus"></u-loadmore>
    </scroll-view>
    <view v-if="hasPermission('misSchoolCalendar_add')" class="add-btn" @click="navTo('form')">
      <image src="/static/images/icon_add_message.png" mode=""></image>
    </view>
    <!-- <view class="btn-plus" @click="navTo('form')" v-if="hasPermission('misSchoolCalendar_add')">
			<u-icon name="plus-circle-fill" size="90" color="#3d87ff"></u-icon>
		</view> -->
  </view>
</template>
<script>
  import $time from '@/common/time.js';
  export default {
    data() {
      return {
        query: {
          current: 1,
          size: 10,
          keywords: '',
          status: '',
        },
        list: [],
        pages: 0,
        loadStatus: 'loadmore',
        options: [],
        headStyle: {
          fontWeight: 'bold',
          color: '#606266',
          margin: '16rpx'
        },
        statusList: [],
        swiperCurrent: 0,
      };
    },
    onLoad() {
      this.loadStatusList();
    },
    computed: {

    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.query.keywords = this.query.keywords;
        this.query.status = this.statusList[this.swiperCurrent].value;
        this.loadList();
      },
      loadList() {
        this.$u.api.mis.misSchoolCalendar.list(this.query).then(res => {
          if (!res.data.records || res.data.records.length == 0) {
            this.loadStatus = "nomore";
            return;
          }
          res.data.records.forEach((item) => {
            item.show = false;
          })
          this.list = this.list.concat(res.data.records);
          this.pages = res.pages;
          this.query.current = res.data.current;
          this.query.size = res.data.size;
          this.loadStatus = "loadmore";
        });
      },
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      handleClick(row) {
        this.navTo('form?id=' + row.id);
      },
      change(index) {
        this.list = [];
        this.query.current = 0;
        this.swiperCurrent = index;
        this.query.keywords = this.keywords;
        this.query.status = this.statusList[this.swiperCurrent].value;
        this.loadList();
      },
      handleChangeStatus(row) {
        let self = this;
        let msg = "";
        if (row.status == 0) {
          msg = "确认要禁用该校历吗？";
        } else {
          msg = "确认要启用该校历吗？";
        }
        uni.showModal({
          title: '提示',
          content: msg,
          showCancel: true,
          success: function(res2) {
            if (res2.confirm) {
              self.$u.api.mis.misSchoolCalendar.changeStatus({
                ids: row.id
              }).then(res => {
                self.$u.toast('操作成功！');
                self.search();
              });
            }
          }
        });
      },
      loadStatusList() {
        this.$u.api.dictBizData({
          code: 'status_type'
        }).then(res => {
          let list = [];
          let json = {
            'label': '全部',
            'value': ''
          }
          list.push(json)
          res.data.forEach((item) => {
            list.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.statusList = list;
          this.loadList();
        });
      },
    }
  };
</script>
<style lang="scss">
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx;
    background: #fff;
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .tabs {
    position: relative;
    display: flex;
    height: 88rpx;
    background: #fff;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      display: block;
      border-top: 1px solid #F7F7F7;
    }

    .tab {
      position: relative;
      width: 100%;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #999;

      &::after {
        content: '';
        position: absolute;
        bottom: 4rpx;
        left: 50%;
        display: inline-block;
        width: 32rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background: transparent;
        transform: translateX(-50%);
      }

      &.active {
        font-weight: 700;
        color: #333;

        &::after {
          background: #3989FC;
        }
      }
    }
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx - 88rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .message-list {
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0;
  }

  .message-item {
    width: 100%;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;
  }

  .message-item-bd {
    position: relative;
    padding: 32rpx;
  }

  .message-title {
    padding-right: 96rpx;
    margin-bottom: 24rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 32rpx;
    color: #333;
    overflow: hidden;
  }

  .message-desc {
    font-size: 24rpx;
    font-weight: 500;
    color: #666;

    &+.message-desc {
      margin-top: 16rpx;
    }

    &.time {
      color: #999;
    }
  }

  .message-status {
    position: absolute;
    right: 32rpx;
    bottom: 32rpx;
    display: inline-block;
    border-radius: 24rpx;
    padding: 0 24rpx;
    line-height: 48rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #3989FC;
    background: #DEEBFE;

    &.disabled {
      color: #FF6600;
      background: rgba(255, 102, 0, .15);
    }
  }

  .add-btn {
    position: absolute;
    right: 32rpx;
    bottom: 288rpx;
    z-index: 99;
    width: 88rpx;
    height: 88rpx;

    image {
      width: 88rpx;
      height: 88rpx;
      vertical-align: top;
    }
  }

  .uni-title {
    font-size: 30rpx;
    color: #333333;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #ededed;
    margin-top: 20rpx;
  }

  .uni-media-list {
    padding: 15px 15px;

  }

  .uni-media-list-body {
    height: 60px;
    padding-left: 20rpx;
    border-left: thick double #D5D5D5;
    border-width: 1px;
  }

  .uni-media-list-text-top {
    width: 100%;
    line-height: 35rpx;
    font-size: 28rpx;

    span {
      margin-right: 10rpx;
    }
  }

  .uni-media-list-text-content {
    width: 100%;
    line-height: 35rpx;
    font-size: 22rpx;
    color: darkgray;

    span {
      margin-right: 10rpx;
    }
  }

  .uni-media-list-text-bottom {
    width: 100%;
    line-height: 24rpx;
    font-size: 26rpx;
    color: #666666;
    text-align: right;

    span {
      margin-right: 10rpx;
    }
  }

  .uni-media-list-right {
    height: 60px;
    padding-left: 20rpx;
    transform: translateY(40%) translateX(50%)
  }

  .btn-plus {
    position: absolute;
    bottom: 50rpx;
    right: 50rpx;
    z-index: 1;
    opacity: 0.6;
  }

  .btn-plus:hover {
    opacity: 1;
  }
</style>